<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>上报查询</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <!-- <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
        <link rel="stylesheet" href="../css/public.css" media="all"> -->
        <link rel="stylesheet" href="../../../css/layui.css">
        <style>
            tip {
                font-size: 2px;
                color:#777b6c;
                font-style:italic;
            }
            .layui-container {
                margin-top: 31px;
            }
        </style>
    </head>
<body>
    <div class="layui-container">
        <div class="layui-form layui-form-pane" id="sendForm">
        <div class="layui-form-item">
            <label class="layui-form-label" required>任务名称</label>
            <div class="layui-input-inline">
                <input type="text" name="title"  required lay-verify="required" lay-reqtext="任务名称不能为空"  placeholder="请输入任务名称" autocomplete="off" class="layui-input">
                <tip>后台查看时方便作出区分</tip>
            </div>
        </div>
        <div class="layui-form-item" id="time_div" > 
            <label class="layui-form-label">时间</label>
            <div class="layui-input-inline">
                <input type="text"  id="time" name="time" placeholder="请选择时间" autocomplete="off" class="layui-input">
                <tip>每天定时发送的时间</tip>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">订阅班级</label>
            <div class="layui-input-inline">
                <input type="text" id="banji" name="banji" placeholder="选择班级" autocomplete="off" class="layui-input">
                <!-- <select name="banji" lay-verify=""  id="banji">
                    <option value="">选择班级</option>
                  </select> -->
                
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="sendMsg">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
            
        </div>
    </div>
    <script src="../../../layui.js" charset="utf-8"></script>
    <script src="../../../js/lay-module/tableSelect/tableSelect.js" charset="utf-8"></script>
    <script src="../../../js/axios.min.js" charset="utf-8"></script>

    <script type="text/javascript">



    
    
        layui.use(['tableSelect','form', 'layedit', 'laydate','element'],function(){
            var tableSelect = layui.tableSelect;
            var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , element = layui.element
            , $ = layui.$;

            // 时间选择
            laydate.render({
                elem: "#time",
                type: "time",
                theme: 'grid'
            });

            function parseArr2Int(arr){
                var n_arr = [];
                for (var i in arr){
                    n_arr.push(parseInt(arr[i]));
                }
                return n_arr;
            }

            form.on("submit(sendMsg)", function(data){
                var postData = data.field;
                var arr_box = [];
                console.log("submit data ", postData);
                postData["banji"] = postData["banji"]?parseArr2Int(postData["banji"].split(',')):[];

                if (!postData["banji"]) {layer.msg("请选择订阅班级!",{icon:2});return false;}
                if (!postData["time"]) {layer.msg("请选择发送时间!",{icon:2});return false;}
                layer.alert("确定发送?",{
                            title:"提示",
                            icon:1
                        }, function(index){
                    axios.post('/yqpost_post', postData)
                        .then(function (response) {
                            console.log("response ", response);
                            
                            layer.close(index);
                            parent.layer.msg("已加入发送队列",{icon:1});
                            parent.layui.table.reload("timerTableId");
                            var iframeIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(iframeIndex);
                        }).catch(function (error) {
                            layer.alert("添加发送队列失败!",{
                                title:"提示",
                                icon:2
                            }, function(index){
                                layer.close(index);
                            })
                    });
                    }); 	
                
                
            });

            // get classes_all
            function get_classes_all(){
            console.log('click');
            axios.post('/get_classes_all')
                .then(function (response) {
                var data = response.data.data;
                var seleCls = $('#select_range');
                var ele;
                console.log("data", data);
                for (var i=0; i<data.length; ++i){
                    ele = document.createElement('option');
                    ele.value = data[i];
                    ele.text = String(data[i]);
                    seleCls.append(ele);
                }
                ele = document.createElement('option');
                ele.value = "all";
                ele.text = "全部";
                seleCls.append(ele);
                form.render();
                console.log(response)
                }).catch(function (error) {
                    console.log("error", error);
                    layer.msg("无法获取班级ID",{icon:2});
                }); 			
            };
            // get_classes_all();

            tableSelect.render({
                elem: '#banji',
                checkedKey: 'classesID',
                searchType: 'more', //开启多条件搜索
                searchList: [
                    {searchKey: 'classesID', searchPlaceholder: '搜索班级ID'}, //搜索条件1
                    {searchKey: 'beizhu', searchPlaceholder: '搜索备注'},  //搜索条件2
                ],
                table: {
                    url: '/classesData',
                    cols: [[
                        { type: 'checkbox' },
                        { field: 'classesID', title: '班级ID' },
                        { field: 'mainGroup', title: '主群' },
                        { field: 'beizhu', title: '备注' }
                    ]]
                },
                done: function (elem, data) {
                //选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
                //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
                    console.log("elem",elem);
                    console.log("data",data);

                    elem[0].value = "";

                    for (var i=0; i<data.data.length; ++i){
                        elem[0].value += ""+data.data[i].classesID;
                        if (i != data.data.length-1) elem[0].value += ", ";
                    }
                }
            })

        });
    
    </script>

</body>
</html>